<template>
  <view class="article-detail">
    <view class="article-header">
      <text class="article-title">{{ articleData.title }}</text>
      <text class="article-time">发布时间：{{ formatDate(articleData.createTime) }}</text>
    </view>
    <view class="article-content">
      <rich-text :nodes="articleData.content"></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getArticleContent } from '@/api/content/article'
const articleData = ref({
  title: '',
  content: '',
  createTime: ''
})

onLoad(async (options) => {
  if (options.id) {  // 正常文章
    try {
      const res = await getArticleContent(options.id)
      articleData.value = {
        title: res.data.title || '无标题',
        content: res.data.content || '',
        createTime: res.data.createTime || new Date().toISOString()
      }
    } catch (error) {
      console.error('获取文章内容失败:', error)
      uni.showToast({ title: error.message, icon: 'none' })
    }
  } else if (options.isBanner) {  // 来自banner的内容
    articleData.value = {
      title: '活动详情',
      content: decodeURIComponent(options.content || ''),
      createTime: new Date().toLocaleDateString()
    }
  }
})

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
}
</script>

<style scoped>
.article-detail {
  padding: 24rpx;
  background-color: #fff;
  min-height: 100vh;
}

.article-header {
  margin-bottom: 24rpx;
}

.article-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.article-time {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #999;
}

.article-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}
</style> 